import React, { Component } from "react";
import { connect } from "react-redux";
import { actionCreators } from "./store";
import "./metadata.scss";
import { imp } from "../../../api/metaData/metaData";
import { FileOutlined } from "@ant-design/icons";

import {
  Layout,
  Button,
  Form,
  Table,
  Input,
  Divider,
  Spin,
  InputNumber,
  Modal,
  Select,
  Row,
  Col,
  Upload,
  Radio,
} from "antd";

const { Content, Header } = Layout;

class MetaDataList extends Component {
  state = {
    addVisible: false,
    name: "",
    edtiorVisible: false,
    importVisible: false,
    editViewData: {},
    update: new FormData(),
    modalVisible: false,
    value: 2,
    fileList: [],
    uploading: false,
    exportVisible: false,
    dataTypeArr: [
      "tinyint",
      "smallint",
      "mediumint",
      "int",
      "bigint",
      "float",
      "double",
      "date",
      "time",
      "year",
      "datetime",
      "timestamp",
      "char",
      "varchar",
      "tinyblob",
      "tinytext",
      "blob",
      "text",
      "mediumblob",
      "mediumtext",
      "longblob",
      "longtext",
    ],
    dataLengthArr: [
      "(-128,127)",
      "(-32768,32767)",
      "(-8388608,8388607)",
      "(-2147483648,2147483647)",
      "(-9223372036854775808,9223372036854775807)",
      "(-3.402823466E+38,-1.175494351E-38),0,(1.175494351E-38,3.402823466351E+38)",
      "(-1.7976931348623157E+308,-2.2250738585072014E-308),0,(2.2250738585072014E-308,1.797 6931348623157E+308)",
      "YYYY-MM-DD",
      "HH:mm:ss",
      "YYYY",
      "YYYY-MM-DD HH:mm:ss",
      "YYYYMMDD HHmmss",
      "0-255 byte",
      "0-65535 byte",
      "0-255 byte",
      "0-255 byte",
      "0-65535 byte",
      "0-65535 byte",
      "0-16777215 byte",
      "0-16777215 byte",
      "0-4294967295 byte",
      "0-4294967295 byte",
    ],
  };

  searchForm = React.createRef();
  formRef = React.createRef();
  editRef = React.createRef();
  //返回类别页面
  back = () => {
    sessionStorage.setItem("category", true);
    this.props.back("true");
  };
  //查询
  search = () => {
    this.searchForm.current.validateFields().then((values) => {
      if (
        values.category === "全部" &&
        values.chineseName === undefined &&
        values.englishName === undefined
      ) {
        this.getInfoList();
        return;
      }
      this.props.searchDataInfo(
        values.category,
        values.chineseName,
        values.englishName,
        this.props.sendMetaId
      );
    });
  };
  //切换页码
  showInfoChange = (pageNum, total) => {
    if (pageNum <= 0 || pageNum > total) return;
    this.props.pageInfoChange(pageNum);
  };
  //重置
  resetForm = () => {
    this.searchForm.current.resetFields();
    const asy = async () => {
      await this.getInfoList();
      await this.props.backFirst();
    };
    asy();
  };
  //新增
  handleAdd = () => {
    this.setState({
      addVisible: true,
    });
  };
  //退出新增
  handleCancel = () => {
    this.setState({
      addVisible: false,
    });
  };
  //点击编辑
  editor = (index) => {
    const editorViewData = JSON.parse(
      JSON.stringify(this.props.listDataSource[index])
    );
    this.setState({
      edtiorVisible: true,
      editViewData: editorViewData,
    });
  };

  //保存新增
  addCategory = () => {
    this.formRef.current.validateFields().then((values) => {
      const addValues = {
        cnName: values.chineseName,
        createTime: null,
        dataId: null,
        datatype: this.state.dataTypeArr.indexOf(values.dataType) + 1,
        description: values.discription,
        increment: values.isAddField ? 1 : 0,
        isEnable: 0,
        isIndex: values.isCreateIndex ? 1 : 0,
        isNull: values.isRequired ? 1 : 0,
        isPk: values.isPrimaryKey ? 1 : 0,
        metaId: this.props.sendMetaId,
        metaName: values.metadataCategory,
        modifyTime: null,
        name: values.englishName,
        type: values.type === "private" ? "10" : "11",
      };
      const asy = async () => {
        await this.props.addMetaData(addValues);
        await this.getInfoList();
        await this.handleCancel();
      };
      asy();

      /*   if(typeof(addValues) == "object" && Object.prototype.toString.call(addValues).toLowerCase() == "[object object]" && !addValues.length){
 
          alert('是JSON对象');
           
          } */
    });
  };
  //删除
  deleteRecord = (record) => {
    const dataId = record.dataId;
    const asy = async () => {
      await this.props.deleterecord(dataId);
      await this.getInfoList();
    };
    asy();
  };
  //导入
  handleImport = () => {
    this.setState({
      importVisible: true,
    });
  };
  //退出导入
  importCancel = () => {
    this.setState({
      importVisible: false,
    });
  };
  //保存编辑
  editorData = () => {
    const dataId = this.state.editViewData.dataId;
    this.editRef.current.validateFields().then((values) => {
      console.log(values);
      if (values) {
        const editValues = {
          cnName: values.chineseName,
          createTime: null,
          dataId: dataId,
          datatype: this.state.dataTypeArr.indexOf(values.dataType) + 1,
          description: values.description,
          increment: values.isAddField === "是" ? 1 : 0,
          isEnable: 0,
          isIndex: values.isCreateIndex === "是" ? 1 : 0,
          isNull: values.isRequired === "是" ? 1 : 0,
          isPk: values.isPrimaryKey === "是" ? 1 : 0,
          metaId: this.props.sendMetaId,
          metaName: values.metadataCategory,
          modifyTime: null,
          name: values.englishName,
          type: values.type === "私有" ? "10" : "11",
        };
        const asy = async () => {
          await this.props.editData(editValues);
          await this.getInfoList();
          await this.editorCancel();
        };
        asy();
      }
    });
  };
  //退出编辑
  editorCancel = () => {
    this.setState({
      edtiorVisible: false,
    });
  };
  //点击下载模板
  handleDownload = () => {
    this.setState({
      modalVisible: true,
    });
  };
  //确定下载模板
  modalData = () => {
    if (this.state.value === 2) {
      const asy = async () => {
        await this.props.modalData();
        await this.modalCancel();
      };
      asy();
    }
  };
  //退出导入
  modalCancel = () => {
    this.setState({
      modalVisible: false,
    });
  };
  modalChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  };
  //取消导出
  exportCancel = () => {
    this.setState({
      exportVisible: false,
    });
  };
  //确认导出
  exportData = () => {
    if (this.state.value === 2) {
      const asy = async () => {
        await this.props.exportData(this.props.sendMetaId);
        await this.exportCancel();
      };
      asy();
    }
  };
  //得到所有数据
  getInfoList = () => {
    const recordId = this.props.sendMetaId;
    this.props.getInfoList(recordId);
  };
  sendLength = (type) => {
    this.setState(
      {
        sendLength: this.state.dataLengthArr[
          this.state.dataTypeArr.indexOf(type)
        ],
      },
      () => {
        if (this.formRef.current === null) return;
        this.formRef.current.setFieldsValue({ length: this.state.sendLength });
        if (this.editRef.current === null) return;
        this.editRef.current.setFieldsValue({ length: this.state.sendLength });
      }
    );
  };
  sendEditLength = (type) => {
    this.setState(
      {
        sendLength: this.state.dataLengthArr[
          this.state.dataTypeArr.indexOf(type)
        ],
      },
      () => {
        if (this.editRef.current === null) return;
        this.editRef.current.setFieldsValue({ length: this.state.sendLength });
      }
    );
  };
  //确认导入元数据
  importData = () => {
    const { update } = this.state;
    update.append("metaId", this.props.sendMetaId);
    update.append("metaName", this.props.sendMetaName);
    this.setState({
      uploading: true,
    });
    const asy = async () => {
      await imp(update)
        .then((res) => {
          this.setState({
            fileList: [],
            uploading: false,
          });
          this.getInfoList();
        })
        .catch((err) => {
          this.setState({
            uploading: false,
          });
          console.log(err);
        });
      await this.importCancel();
    };
    asy();
  };
  //点击导出
  handleExport = () => {
    this.setState({
      exportVisible: true,
    });
  };
  render() {
    const {
      addVisible,
      name,
      category,
      edtiorVisible,
      uploading,
      fileList,
      importVisible,
      editViewData,
      sendLength,
      modalVisible,
      exportVisible,
    } = this.state;
    const columns = [
      {
        title: "序号",
        width: 60,
        key: "dataId",
        dataIndex: 1,
        render: (text, record, index) => {
          return (this.props.listCurrentPage - 1) * 10 + index + 1;
        },
      },
      {
        title: "英文名",
        key: "name",
        dataIndex: "name",
      },
      {
        title: "中文名",
        key: "cnName",
        dataIndex: "cnName",
      },
      {
        title: "元数据类别",
        width: 110,
        key: "metaName",
        dataIndex: "metaName",
      },
      {
        title: "数据类型",
        width: 100,
        key: "datatype",
        dataIndex: "datatype",
        render: (text, record, index) => {
          return this.state.dataTypeArr[text - 1];
        },
      },
      {
        title: "数据长度",
        width: 100,
        key: "length",
        dataIndex: "length",
        render: (text, record, index) => {
          return (
            <span style={{ wordWrap: "break-word", wordBreak: "break-word" }}>
              {this.state.dataLengthArr[record.datatype - 1]}
            </span>
          );
        },
        ellipsis: true,
      },
      {
        title: "启用状态",
        width: 100,
        key: "isEnable",
        dataIndex: "isEnable",
        render: (text, record, index) => {
          if (text === 1) {
            return "未启用";
          }
          if (text === 0) {
            return (
              <span style={{ color: "rgba(0, 102, 0, 0.647058823529412)" }}>
                启用
              </span>
            );
          }
        },
      },
      {
        title: "类型",
        key: "type",
        width: 60,
        dataIndex: "type",
        render: (text, record, index) => {
          if (text === 11) {
            return "私有";
          }
          if (text === 10) {
            return "国标";
          }
        },
      },
      {
        title: "描述",
        key: "description",
        dataIndex: "description",
      },
      {
        title: "创建时间",
        key: "createTime",
        dataIndex: "createTime",
        width: 110,
      },
      {
        title: "操作",
        width: 110,
        key: "action",
        dataIndex: "action",
        render: (text, record, index) => {
          if (record.isEnable === 1) {
            return (
              <div>
                <span
                  className="action"
                  onClick={() =>
                    this.editor((this.props.listCurrentPage - 1) * 10 + index)
                  }
                >
                  编辑
                </span>
                <Divider type="vertical" />
                <span
                  className="action"
                  onClick={() => this.deleteRecord(record)}
                >
                  删除
                </span>
              </div>
            );
          } else {
            return (
              <div>
                <span className="unaction">编辑</span>
                <Divider type="vertical" />
                <span className="unaction">删除</span>
              </div>
            );
          }
        },
      },
    ];
    const cir = {
      width: "16px",
      height: "16px",
      borderRadius: "50%",
      margin: "0 5px",
      background: "#D0D0D0",
    };
    const redCir = {
      width: "16px",
      height: "16px",
      borderRadius: "50%",
      margin: "0  5px 0 23px",
      background: "#FF6158",
      cursor: "pointer",
    };
    const radioStyle = {
      display: "block",
      height: "30px",
      lineHeight: "30px",
    };
    const titleStyle = {
      color: "rgb(0,126,220)",
      height: 54.6,
      width: 520,
      backgroundColor: "#f0f3f6",
      position: "absolute",
      left: 0,
      top: 0,
      display: "flex",
      alignItems: "center",
      paddingLeft: 24,
      fontWeight: "bold",
      borderBottom: "2px solid #e5e6e8",
    };
    const modalStyle = {
      color: "rgb(0,126,220)",
      height: 54.6,
      width: 520,
      backgroundColor: "#f0f3f6",
      position: "absolute",
      left: 0,
      top: 0,
      display: "flex",
      alignItems: "center",
      fontWeight: "bold",
      borderBottom: "2px solid #e5e6e8",
    };
    const footerStyle = {
      backgroundColor: "#e6eef5",
      width: 520,
      height: 53,
      position: "absolute",
      left: 0,
      bottom: 0,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
    };
    const modalFooterStyle = {
      backgroundColor: "#e6eef5",
      width: 520,
      height: 53,
      position: "absolute",
      left: 0,
      bottom: 0,
      display: "flex",
      alignItems: "center",
      justifyContent: "flex-end",
      paddingRight: "30px",
    };
    const formItemStyle = { color: "rgb(0,126,220)", fontWeight: "bold" };
    const rules = { required: true };
    const validateMessages = {
      required: "请输入",
    };
    const validateEnglish = (rule, value, callback) => {
      let reg = /^[^\u4e00-\u9fa5]+$/g;
      if (value && !reg.test(value)) {
        callback("书写格式错误");
      } else {
        callback();
      }
    };
    const paginationProps = {
      onChange: (current, pageSize) => {
        this.props.changeInfoPageNum(current, pageSize);
      },
      current: this.props.listCurrentPage,
      pageSize: 10,
      showSizeChanger: false,
      hideOnSinglePage: true,
    };
    const config = {
      beforeUpload: (file, fileList) => {
        const sendData = new FormData();
        sendData.append("file", file);
        this.setState({
          update: sendData,
        });
        this.setState((state) => {
          return {
            fileList: [...state.fileList, file],
          };
        });
        return false;
      },
      onRemove: (file) => {
        var { fileList } = this.state;
        const index = fileList.indexOf(file);
        fileList.splice(index, 1);
        this.setState({
          fileList,
        });
      },
      onChange: (info) => {
        let fileList = [...info.fileList];
        fileList = fileList.slice(-1);
      },
      fileList,
    };
    const typearr = [];
    const typarr = ["人员类", "车辆类", "地理信息类"];
    typarr.forEach((item) => {
      typearr.push(
        <Select.Option key={item} value={item}>
          {item}
        </Select.Option>
      );
    });
    const datatypearr = ["请选择数据类型"];
    this.state.dataTypeArr.forEach((item) => {
      datatypearr.push(
        <Select.Option key={item} value={item}>
          {item}
        </Select.Option>
      );
    });
    const limitDecimals = (value) => {
      if (typeof value === "number") {
        return value;
      }
      if (typeof value !== "number") {
        if (value > this.props.listTotal) {
          return value.replace(/^\d+/g, this.props.listTotal);
        }
        return value.replace(/^(0+)|[^\d]+/g, "");
      }
    };
    return (
      <Content className="metadata-content">
        <Layout>
          <Header className="header">
            <p className="title">
              <a style={{ color: "black" }} onClick={this.back}>
                类别列表 {">"} 元数据列表
              </a>
            </p>
            <div style={{ position: "absolute", right: 0 }}>
              <Button
                type="primary"
                onClick={this.handleAdd}
                style={{ marginLeft: 10 }}
              >
                新增
              </Button>
              <Button
                type="primary"
                onClick={this.handleDownload}
                style={{ marginLeft: 10 }}
              >
                下载模板
              </Button>
              <Button
                type="primary"
                onClick={this.handleImport}
                style={{ marginLeft: 10 }}
              >
                导入
              </Button>
              <Button
                type="primary"
                onClick={this.handleExport}
                style={{ marginLeft: 10 }}
              >
                导出
              </Button>
            </div>
          </Header>
          <Content className="content">
            <div className="form-inline">
              <Form layout="inline" ref={this.searchForm}>
                <Form.Item
                  label="类别"
                  colon={false}
                  name="category"
                  initialValue="全部"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                    style={{ width: 200 }}
                  >
                    <Select.Option value="全部">全部</Select.Option>
                    <Select.Option value="国标">国标</Select.Option>
                    <Select.Option value="私有">私有</Select.Option>
                  </Select>
                </Form.Item>
                <Form.Item label="中文名称" colon={false} name="chineseName">
                  <Input autoComplete="off" />
                </Form.Item>
                <Form.Item
                  label="英文名称"
                  rules={[
                    { message: "请输入英文名称" },
                    { validator: validateEnglish },
                  ]}
                  colon={false}
                  name="englishName"
                >
                  <Input autoComplete="off" />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" onClick={this.search}>
                    查询
                  </Button>
                </Form.Item>
                <Form.Item>
                  <Button type="primary" onClick={this.resetForm}>
                    重置
                  </Button>
                </Form.Item>
              </Form>
            </div>
            <div className="table-box">
              <Spin spinning={false}>
                <Table
                  columns={columns}
                  dataSource={this.props.listDataSource}
                  className="table"
                  pagination={paginationProps}
                  rowKey="dataId"
                />
                <div className="footer">
                  显示
                  <InputNumber
                    min={1}
                    max={this.props.listTotalPage}
                    defaultValue={this.props.listPage}
                    value={this.props.listCurrentPage}
                    formatter={limitDecimals}
                    parser={limitDecimals}
                    onChange={(e) => {
                      this.showInfoChange(e, this.props.listTotal);
                    }}
                  />
                  项结果，共{this.props.listTotalPage}项
                </div>
              </Spin>
            </div>
          </Content>
        </Layout>
        <Modal
          destroyOnClose
          title={<div style={titleStyle}>新增元数据</div>}
          visible={addVisible}
          onCancel={this.handleCancel}
          bodyStyle={{ backgroundColor: "#f0f3f6" }}
          footer={
            <div style={footerStyle}>
              <Button
                type="primary"
                style={{ color: "white", borderRadius: 5 }}
                onClick={this.addCategory}
              >
                保存
              </Button>
              <Button
                style={{ color: "#007cdb", borderRadius: 5 }}
                onClick={this.handleCancel}
              >
                取消
              </Button>
            </div>
          }
        >
          <Form
            labelCol={{ span: 24 }}
            wrapperCol={{ span: 20 }}
            validateMessages={validateMessages}
            ref={this.formRef}
          >
            <Row>
              <Col span={12}>
                <Form.Item
                  label={<span style={formItemStyle}>元数据类别</span>}
                  initialValue="请选择类别"
                  rules={[rules]}
                  name="metadataCategory"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    {typearr}
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>英文名</span>}
                  rules={[
                    { required: true, message: "请输入英文名称" },
                    { validator: validateEnglish },
                  ]}
                  name="englishName"
                >
                  <Input autoComplete="off" placeholder="请输入表英文名称" />
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>数据类型</span>}
                  initialValue="请选择数据类型"
                  rules={[rules]}
                  name="dataType"
                >
                  <Select
                    onChange={(e) => {
                      this.sendLength(e);
                    }}
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    {datatypearr}
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>是否主键字段</span>}
                  rules={[rules]}
                  initialValue={false}
                  name="isPrimaryKey"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>是否创建索引</span>}
                  initialValue={false}
                  rules={[rules]}
                  name="isCreateIndex"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label={<span style={formItemStyle}>类型</span>}
                  initialValue="private"
                  rules={[rules]}
                  name="type"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    <Select.Option value="private">私有</Select.Option>
                    <Select.Option value={false}>国标</Select.Option>
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>中文名</span>}
                  rules={[{ required: true, message: "请输入中文名称" }]}
                  name="chineseName"
                >
                  <Input autoComplete="off" placeholder="请输入表中文名称" />
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>数据长度</span>}
                  rules={[{ required: true, message: "请选择数据长度" }]}
                  name="length"
                >
                  <Input disabled autoComplete="off" />
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>是否必填</span>}
                  initialValue={true}
                  rules={[rules]}
                  name="isRequired"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>是否增量字段</span>}
                  initialValue={true}
                  rules={[rules]}
                  name="isAddField"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Form.Item
                label={<span style={formItemStyle}>描述</span>}
                name="description"
                style={{ width: "100%" }}
                wrapperCol={{ span: 22 }}
              >
                <Input.TextArea placeholder="请输入内容" />
              </Form.Item>
            </Row>
          </Form>
        </Modal>
        <Modal
          destroyOnClose
          title={<span style={{ fontSize: "bold" }}>导入元数据</span>}
          onCancel={this.importCancel}
          visible={importVisible}
          footer={
            <div style={{ margin: "0 auto", width: 250 }}>
              <Button
                type="primary"
                style={{ color: "white" }}
                onClick={this.importData}
                disabled={fileList.length === 0}
                loading={uploading}
              >
                确认({uploading ? "uploading" : "Start Upload"})
              </Button>
              <Button onClick={this.importCancel}>取消</Button>
            </div>
          }
        >
          <Form labelCol={{ span: 24 }}>
            <Form.Item
              label="上传元数据文件(大小不超过xxKB)"
              rules={[rules]}
              name="import"
            >
              <Upload {...config}>
                <Button>点击上传</Button>
              </Upload>
            </Form.Item>
          </Form>
        </Modal>
        <Modal
          destroyOnClose
          title={
            <div style={modalStyle}>
              <div onClick={this.modalCancel} style={redCir}></div>
              <div style={cir}></div>
              <div style={cir}></div>
              <div style={{ marginLeft: "85px" }}>
                正在打开 <span style={{ fontSize: "19px" }}>model.json</span>
              </div>
            </div>
          }
          visible={modalVisible}
          closable={false}
          bodyStyle={{ backgroundColor: "#f0f3f6" }}
          footer={
            <div style={modalFooterStyle}>
              <Button
                type="primary"
                style={{ color: "white", borderRadius: 5 }}
                onClick={this.modalCancel}
              >
                取消
              </Button>
              <Button
                style={{ color: "#007cdb", borderRadius: 5 }}
                onClick={this.modalData}
              >
                确定
              </Button>
            </div>
          }
        >
          <div
            style={{
              fontSize: "14px",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            您选择了打开：
          </div>
          <div style={{ position: "relative", marginBottom: "5px" }}>
            <FileOutlined
              style={{
                display: "inline-block",
                position: "absolute",
                top: "1px",
                left: "0",
              }}
            />
            <div style={{ display: "inline-block", margin: "0 0 9px 19px" }}>
              <div style={{ fontWeight: "bold" }}>model.json</div>
              <div style={{ marginTop: "4px" }}>文件类型： 文稿（185字节）</div>
              <div>
                来源：{" "}
                <span style={{ fontWeight: "bold" }}>
                  ...x-pop-dsl.oss-cn-shanghai.aliyuncs.com
                </span>
              </div>
            </div>
          </div>
          <div style={{ fontSize: "14px", marginBottom: "15px" }}>
            <div style={{ fontWeight: "bold" }}>
              您想要Firefox如何处理此文件？
            </div>
            <Radio.Group onChange={this.modalChange} value={this.state.value}>
              <Radio style={radioStyle} value={1}>
                打开，通过
                <Select
                  style={{ width: 368, marginLeft: 5 }}
                  defaultValue="Visual Studio Code(默认)"
                  getPopupContainer={(triggerNode) => triggerNode.parentNode}
                >
                  <Select.Option value={true}>
                    Visual Studio Code(默认)
                  </Select.Option>
                </Select>
              </Radio>
              <Radio style={radioStyle} value={2}>
                保存文件
              </Radio>
            </Radio.Group>
          </div>
        </Modal>
        <Modal
          destroyOnClose
          title={
            <div style={modalStyle}>
              <div onClick={this.exportCancel} style={redCir}></div>
              <div style={cir}></div>
              <div style={cir}></div>
              <div style={{ marginLeft: "85px" }}>
                正在打开 <span style={{ fontSize: "19px" }}>model.json</span>
              </div>
            </div>
          }
          visible={exportVisible}
          closable={false}
          bodyStyle={{ backgroundColor: "#f0f3f6" }}
          footer={
            <div style={modalFooterStyle}>
              <Button
                type="primary"
                style={{ color: "white", borderRadius: 5 }}
                onClick={this.exportCancel}
              >
                取消
              </Button>
              <Button
                style={{ color: "#007cdb", borderRadius: 5 }}
                onClick={this.exportData}
              >
                确定
              </Button>
            </div>
          }
        >
          <div
            style={{
              fontSize: "14px",
              marginBottom: "5px",
              fontWeight: "bold",
            }}
          >
            您选择了打开：
          </div>
          <div style={{ position: "relative", marginBottom: "5px" }}>
            <FileOutlined
              style={{
                display: "inline-block",
                position: "absolute",
                top: "1px",
                left: "0",
              }}
            />
            <div style={{ display: "inline-block", margin: "0 0 9px 19px" }}>
              <div style={{ fontWeight: "bold" }}>model.json</div>
              <div style={{ marginTop: "4px" }}>文件类型： 文稿（185字节）</div>
              <div>
                来源：{" "}
                <span style={{ fontWeight: "bold" }}>
                  ...x-pop-dsl.oss-cn-shanghai.aliyuncs.com
                </span>
              </div>
            </div>
          </div>
          <div style={{ fontSize: "14px", marginBottom: "15px" }}>
            <div style={{ fontWeight: "bold" }}>
              您想要Firefox如何处理此文件？
            </div>
            <Radio.Group onChange={this.modalChange} value={this.state.value}>
              <Radio style={radioStyle} value={1}>
                打开，通过
                <Select
                  style={{ width: 368, marginLeft: 5 }}
                  defaultValue="Visual Studio Code(默认)"
                  getPopupContainer={(triggerNode) => triggerNode.parentNode}
                >
                  <Select.Option value={true}>
                    Visual Studio Code(默认)
                  </Select.Option>
                </Select>
              </Radio>
              <Radio style={radioStyle} value={2}>
                保存文件
              </Radio>
            </Radio.Group>
          </div>
        </Modal>
        <Modal
          destroyOnClose
          title={<div style={titleStyle}>编辑元数据</div>}
          visible={edtiorVisible}
          onCancel={this.editorCancel}
          bodyStyle={{ backgroundColor: "#f0f3f6" }}
          footer={
            <div style={footerStyle}>
              <Button
                type="primary"
                style={{ color: "white", borderRadius: 5 }}
                onClick={this.editorData}
              >
                保存
              </Button>
              <Button
                style={{ color: "#007cdb", borderRadius: 5 }}
                onClick={this.editorCancel}
              >
                取消
              </Button>
            </div>
          }
        >
          <Form
            labelCol={{ span: 24 }}
            wrapperCol={{ span: 20 }}
            validateMessages={validateMessages}
            ref={this.editRef}
          >
            <Row>
              <Col span={12}>
                <Form.Item
                  label={<span style={formItemStyle}>元数据类别</span>}
                  initialValue={editViewData.metaName}
                  rules={[rules]}
                  name="metadataCategory"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    {typearr}
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>英文名</span>}
                  rules={[{ required: true }, { validator: validateEnglish }]}
                  initialValue={editViewData.name}
                  name="englishName"
                >
                  <Input autoComplete="off" />
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>数据类型</span>}
                  initialValue={
                    this.state.dataTypeArr[editViewData.datatype - 1]
                  }
                  rules={[rules]}
                  name="dataType"
                >
                  <Select
                    onChange={(e) => {
                      this.sendEditLength(e);
                    }}
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    {datatypearr}
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>是否主键字段</span>}
                  initialValue={editViewData.isPk === 0 ? "否" : "是"}
                  rules={[rules]}
                  name="isPrimaryKey"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>是否创建索引</span>}
                  initialValue={editViewData.isIndex === 0 ? "否" : "是"}
                  rules={[rules]}
                  name="isCreateIndex"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label={<span style={formItemStyle}>类型</span>}
                  initialValue={editViewData.type === 10 ? "国标" : "私有"}
                  rules={[rules]}
                  name="type"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    <Select.Option value="private">私有</Select.Option>
                    <Select.Option value={false}>国标</Select.Option>
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>中文名</span>}
                  initialValue={editViewData.cnName}
                  rules={[{ required: true, message: "请输入中文名" }]}
                  name="chineseName"
                >
                  <Input autoComplete="off" />
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>数据长度</span>}
                  rules={[{ required: true, message: "请选择数据长度" }]}
                  initialValue={
                    this.state.dataLengthArr[editViewData.datatype - 1]
                  }
                  name="length"
                >
                  <Input disabled autoComplete="off" />
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>是否必填</span>}
                  initialValue={editViewData.isNull === 0 ? "否" : "是"}
                  rules={[rules]}
                  name="isRequired"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                  </Select>
                </Form.Item>
                <Form.Item
                  label={<span style={formItemStyle}>是否增量字段</span>}
                  initialValue={editViewData.increment === 0 ? "否" : "是"}
                  rules={[rules]}
                  name="isAddField"
                >
                  <Select
                    getPopupContainer={(triggerNode) => triggerNode.parentNode}
                  >
                    <Select.Option value={true}>是</Select.Option>
                    <Select.Option value={false}>否</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Form.Item
                label={<span style={formItemStyle}>描述</span>}
                initialValue={editViewData.description}
                name="description"
                style={{ width: "100%" }}
                wrapperCol={{ span: 22 }}
              >
                <Input.TextArea ref={this.textAreaRef} />
              </Form.Item>
            </Row>
          </Form>
        </Modal>
      </Content>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    listDataSource: state.getIn(["MetaData", "listDataSource"]),
    sendMetaId: state.getIn(["MetaData", "sendMetaId"]),
    sendMetaName: state.getIn(["MetaData", "sendMetaName"]),
    listPage: state.getIn(["MetaData", "listPage"]),
    listCurrentPage: state.getIn(["MetaData", "listCurrentPage"]),
    listTotalPage: state.getIn(["MetaData", "listTotalPage"]),
    listTotal: state.getIn(["MetaData", "listTotal"]),
    listPageNum: state.getIn(["MetaData", "listPageNum"]),
    listPageSize: state.getIn(["MetaData", "listPageSize"]),
    listTotalSize: state.getIn(["MetaData", "listTotalSize"]),
  };
};

const mapDispatchToProps = (dispatch) => ({
  searchDataInfo(type, cnname, enname, metaid) {
    dispatch(actionCreators.searchData(type, cnname, enname, metaid));
  },
  pageInfoChange(pageNum) {
    dispatch(actionCreators.changeInfoSize(pageNum));
  },
  addMetaData(addValues) {
    dispatch(actionCreators.addMetaDa(addValues));
  },
  deleterecord(dataId) {
    dispatch(actionCreators.deleteListRecord(dataId));
  },
  editData(editValues) {
    dispatch(actionCreators.editListData(editValues));
  },
  changeInfoPageNum(current, pageSize) {
    dispatch(actionCreators.changeInfoPageNum(current, pageSize));
  },
  modalData() {
    dispatch(actionCreators.modalData());
  },
  exportData(sendMetaId) {
    dispatch(actionCreators.exportData(sendMetaId));
  },
  getInfoList(recordId) {
    dispatch(actionCreators.getMetaDataInfo(recordId));
  },
  backFirst() {
    dispatch({
      type: "back_first",
    });
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(MetaDataList);
